<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>照片墙</title>
    <link href="../static/images/me.jpg" th:href="@{/images/me.jpg}" rel="icon" type="image/x-ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
    <link rel="stylesheet" href="../static/lib/picture/css/jkresponsivegallery.css" th:href="@{/lib/picture/css/jkresponsivegallery.css}">
</head>
<body>

    <!--导航-->
    <nav class="gird-header">
        <div th:replace="~{_fragment::menu(6)}"></div>
    </nav>

    <!--顶部图片-->
    <div class="m-bg-type_outer" style="width: 100%;height: 40%">
        <img src="../static/images/picturebg.jpg" th:src="@{/images/picturebg.jpg}" alt="" class="ui m-bg image" style="width: 100%;height: 100%">
        <div class="m-bg-class_cover">
            <div class="ui container" style="position: relative ;bottom: -540px;">
                <div class="m-font-size-title m-right-bottom" align="center" style="font-family:'STXingkai'">照片墙</div>
                <div class="m-font-size-text-init-title m-margin-top" align="center">愿你走出半生，归来仍是少年</div>
            </div>
        </div>
    </div>


    <!--照片墙-->
    <div id="picture-main">

        <article class="thumb" th:each="picture:${pictures}">
            <div class="ma5-gallery">
                <div class="rthumbnail">
                    <a href="../static/images/backimg1.jpg" th:href="@{${picture.pictureaddress}}">
                        <img class="picture-zmki_px" src="../static/images/backimg1.jpg" th:src="@{${picture.pictureaddress}}">
                    </a>
                    <div class="m-picture-text" th:text="${picture.picturename}">起风了</div>
                    <div  class="rcaption">
                        <div style="font-size: large;" th:text="${picture.picturename}">起风了</div>
                        <div style="font-size: small" class="m-margin-top" th:text="${picture.picturetime}">2020-02-02 &nbsp;深圳</div>
                        <p style="font-size: small" th:text="${picture.picturedescription}">我曾难自拔于世界之大，也沉迷于其中梦话</p>
                    </div>
                </div>
            </div>
        </article>
    </div>


    <!--底部栏-->
    <footer th:replace="~{_fragment::footer}"></footer>


    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
    <script src="../static/lib/picture/js/jquery.min.js" th:src="@{/lib/picture/js/jquery.min.js}"></script>
    <script src="../static/lib/picture/js/jkresponsivegallery.js" th:src="@{/lib/picture/js/jkresponsivegallery.js}"></script>

    <!--磁铁线条-->
    <script type="text/javascript" color="0,0,255" opacity='1' zIndex="-2" count="100" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

    <script>
        $(function() {
            $('.rthumbnail').responsivegallery({autoclose: false});
        });
    </script>

<script th:replace="~{_fragment::script}"></script>
</body>
</html>